<template>
  <main>
    <h2>我是首页</h2>
    <ul>
      <!-- router-link: 路由入口组件，它最终在页面上是a标签，但是它不会重新访问站点 -->
      <li>
        <router-link to="/router-base"><h3>嵌套路由</h3></router-link>
        <ul class="level2">
          <li>
            <router-link to="/router-base/a/35">嵌套路由-组件a</router-link>
          </li>
          <li>
            <router-link to="/router-base/b/18">嵌套路由-组件b</router-link>
          </li>
        </ul>
      </li>
      <li>
        <router-link to="/my-center/奉先/35"
          ><h3>嵌套路由-params传参</h3></router-link
        >
        <ul class="level2">
          <li>
            <router-link to="/my-center/奉先/35/school/电子科大/电子商务"
              >我的学校</router-link
            >
          </li>
          <li>
            <router-link to="/my-center/奉先/35/fond/足球/20"
              >我的爱好</router-link
            >
          </li>
        </ul>
      </li>
      <li>
        <router-link to="/named-router-view"
          ><h3>嵌套多个路由出口</h3></router-link
        >
      </li>
      <li>
        <router-link to="/keep-alive"
          ><h3>组件缓存</h3></router-link
        >
      </li>
    </ul>
    <hr />
    <!-- 路由出口，用于展示路由出来的组件 -->
    <h2>路由出口</h2>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </main>
</template>
  
  <script>
export default {
  name: "App",
};
</script>
  
  <style>
* {
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
</style>
<style scoped>
.level2 > li {
  padding-left: 2em;
}
</style>